export default {
    data() {
        return {
            // 添加弹框
            dialogAdd: false,
            // 修改弹框
            dialogUpd: false,
            // 按钮是否禁用
            disabled: true,
            activeName: 'many',
            // 选中三级后的数据
            cascaderArr: [],
            // 级联数据
            cascaderOptions: [],
            // 级联配置项
            props: {
                value: 'cat_id',
                label: 'cat_name',
                children: 'children',
                expandTrigger: 'hover'
            },
            // 动态数据
            manyList: [],
            // 静态数据
            onlyList: [],
            // 添加form数据
            addParamsForm: {
                attr_name: ''
            },
            // 查询数据的当前id
            attrId: '',
            inputVisible: false,
            inputValue: ''
        }
    },
    created() {
        this.getCategoriesList();
    },
    methods: {
        // 获取商品分类
        async getCategoriesList() {
            let {
                data: res
            } = await this.$http.get('categories');
            this.cascaderOptions = res.data;
        },
        // 查询动态数据
        async getMany() {
            let {
                data: res
            } = await this.$http.get('categories/' + this.cascaderArr[this.cascaderArr.length - 1] + '/attributes', {
                params: {
                    sel: this.activeName
                }
            });
            res.data.forEach(item => {
                let arr = item.attr_vals.split(',');
                item.attr_vals = arr;
            });
            this.manyList = res.data;
        },
        // 查询静态数据
        async getOnly() {
            let {
                data: res
            } = await this.$http.get('categories/' + this.cascaderArr[this.cascaderArr.length - 1] + '/attributes', {
                params: {
                    sel: this.activeName
                }
            });
            res.data.forEach(item => {
                let arr = item.attr_vals.split(' ');
                item.attr_vals = arr;
            });
            this.onlyList = res.data;
        },
        // 级联事件
        handleChange() {
            if (this.cascaderArr.length != 3) {
                this.cascaderArr = [];
                this.disabled = true;
                this.onlyList = [];
                this.manyList = [];
                return;
            }
            this.disabled = false;
            this.getMany();
            this.getOnly();
        },
        // tab切换事件
        handleClick() {
            if (this.activeName == 'many') {
                this.getMany();
            } else {
                this.getOnly();
            }
        },
        // 添加参数
        async addParams() {
            let {
                data: res
            } = await this.$http.post('categories/' + this.cascaderArr[this.cascaderArr.length - 1] + '/attributes', {
                attr_name: this.addParamsForm.attr_name,
                attr_sel: this.activeName
            });
            this.dialogAdd = false;
            this.$message.success('添加成功');
            this.getMany();
            this.getOnly();
        },
        // 删除参数
        async deleteParams(row) {
            let confirm = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(error => error);
            // console.log(confirm)
            if (confirm == 'cancel') return this.$message.error('取消删除');
            let {
                data: res
            } = await this.$http.delete('categories/' + row.cat_id + '/attributes/' + row.attr_id);
            // console.log(res)
            if (res.meta.status != 200) return this.$message.error('删除成功');
            this.getMany();
            this.getOnly();
        },
        // 根据 ID 查询参数
        async searchParams(row) {
            this.attrId = row.attr_id;
            this.dialogUpd = true;
            let {
                data: res
            } = await this.$http.get('categories/' + row.cat_id + '/attributes/' + row.attr_id);
            // console.log(res)
            this.addParamsForm = res.data;
        },
        // categories/:id/attributes/:attrId
        // 提交参数
        async updateParams() {
            let {
                data: res
            } = await this.$http.put('categories/' + this.cascaderArr[this.cascaderArr.length - 1] + '/attributes/' + this.attrId, {
                attr_name: this.addParamsForm.attr_name,
                attr_sel: this.activeName
            })
            this.dialogUpd = false;
            this.getMany();
            this.getOnly();
        },
        // 删除
        async handleClose(row, tag) {
            let index = row.attr_vals.findIndex(item => item == tag);
            row.attr_vals.splice(index, 1);
            if (this.activeName == 'many') {
                row.attr_vals.push(this.inputValue);
                let {
                    data: res
                } = await this.$http.put('categories/' + row.cat_id + '/attributes/' + row.attr_id, {
                    attr_name: row.attr_name,
                    attr_sel: row.attr_sel,
                    attr_vals: row.attr_vals.join(',')
                });
            } else {
                row.attr_vals.push(this.inputValue);
                let {
                    data: res
                } = await this.$http.put('categories/' + row.cat_id + '/attributes/' + row.attr_id, {
                    attr_name: row.attr_name,
                    attr_sel: row.attr_sel,
                    attr_vals: row.attr_vals.join(' ')
                });
            }
        },

        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        // 添加
        async handleInputConfirm(row) {
            if (this.inputValue.length == 0) {
                this.inputVisible = false;
                this.inputValue = '';
                return;
            }
            if (this.activeName == 'many') {
                row.attr_vals.push(this.inputValue);
                let {
                    data: res
                } = await this.$http.put('categories/' + row.cat_id + '/attributes/' + row.attr_id, {
                    attr_name: row.attr_name,
                    attr_sel: row.attr_sel,
                    attr_vals: row.attr_vals.join(',')
                });
            } else {
                row.attr_vals.push(this.inputValue);
                let {
                    data: res
                } = await this.$http.put('categories/' + row.cat_id + '/attributes/' + row.attr_id, {
                    attr_name: row.attr_name,
                    attr_sel: row.attr_sel,
                    attr_vals: row.attr_vals.join(' ')
                });
            }
            this.inputVisible = false;
            this.inputValue = '';
        }
    },
}